<script setup>
import { ref, watch,onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

// 定义菜单列表
const meunlist = ref([
  { id: 1, name: '用户管理', url: '/user', children: [{name: '用户列表', url: '/user/list'}] },
  // { id: 2, name: '角色管理', url: '/role', children: [{name: '角色列表', url: '/role/list'}] },
  { id: 3, name: '入库管理', url: '/inbound', children: [{name: '入库单', url: '/inbound/order'},{name : '入库作业单', url: '/inbound/list'}] },
  { id: 4, name: '出库管理', url: '/outbound', children: [{name: '出库单', url: '/outbound/order'},{name: '出库作业单',url: '/outbound/list'}] },
  { id: 5, name: '仓库管理', url: '/warehouse', children: [{name: '仓库列表', url: '/warehouse/list'},{name: '库区列表', url: '/warehouse/area'},{name: '货架列表', url: '/warehouse/shelf'},{name: '装卸点', url: '/warehouse/position'}] },
  { id: 6, name: '员工管理', url: '/employee', children: [{name: '员工列表', url: '/employee/list'}] },
  { id: 7, name: '库存管理', url: '/stock', children: [{name: '库存列表', url: '/stock/list'}]},
  { id: 8, name: '数据分析', url: '/data', children: [{name: '数据统计', url: '/data/statistics'}]},
]);

var permission = ref('');

// 权限映射
const permissionMap = {
  '/user/list': '/user/search',
  '/warehouse/area': '/area/search',
  '/warehouse/shelf': '/shelf/search',
  '/warehouse/position': '/LoadingPosition/search',
  '/inbound/order': '/instore/search',
  '/inbound/list': '/inOperation/search',
  '/outbound/order': '/outStore/search',
  '/outbound/list': '/outOperation/search',
  '/employee/list': '/employee/search',
}

onMounted(() => {

permission.value =localStorage.getItem("permission")
  
})

const hasPermission = (menuPath) => {
  const userPermissions = permission.value?.split(',');
  console.log(permission.value)
  console.log(userPermissions)
  // 获取该菜单对应的后端权限路径
  const requiredPermission = permissionMap[menuPath];
  // 如果该菜单不需要权限映射，则默认显示
  if (!requiredPermission) return true;
  // 检查用户是否拥有该权限
  return userPermissions.includes(requiredPermission);
}

// 在 script setup 中添加
const hasChildrenPermission = (children) => {
  // 检查是否至少有一个子菜单有权限
  return children.some(child => hasPermission(child.url));
}

const route = useRoute(); // 获取当前路由
const router = useRouter(); // 获取路由实例
const breadcrumbs = ref([]); // 定义面包屑导航的状态

// 监听路由变化，更新面包屑导航
watch(route, () => {
  breadcrumbs.value = [];
  meunlist.value.forEach(menu => {
    if (menu.url === route.path) {
      breadcrumbs.value.push({ name: menu.name, url: menu.url });
    }
    menu.children.forEach(subMenu => {
      if (subMenu.url === route.path) {
        breadcrumbs.value.push({ name: menu.name, url: menu.url });
        breadcrumbs.value.push({ name: subMenu.name, url: subMenu.url });
      }
    });
  });
}, { immediate: true });

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  router.push('/login');
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="180 px" style="height: 100vh; background-color: #545c64;">
        <el-col>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            width="100%"
            text-color="#fff"
          >
          <template v-for="(item ,index) in meunlist"  :key="item.id">
                <!-- 渲染菜单列表 -->
                <el-sub-menu  v-if="hasChildrenPermission(item.children)" :index="item.id">
              <template #title>
                <!-- <el-icon><location /></el-icon> -->
                <el-icon v-if="index===2||index===3||index===4" ><HomeFilled /></el-icon>
                <el-icon v-if="index===0||index===1||index===5" ><Avatar /></el-icon>
                <el-icon v-if="index===6" ><GoodsFilled /></el-icon>
                <el-icon v-if="index===7" ><PieChart /></el-icon>
                <span>{{ item.name }}</span>
              </template >
              <template v-for="i in item.children" :key="i.id">
                
                <router-link v-if="hasPermission(i.url)"  :to="i.url" :key="i.id">
                  <el-menu-item :index="i.url">{{ i.name }}</el-menu-item>
                </router-link>
                
              </template>
            </el-sub-menu>



          </template>

          </el-menu>
        </el-col>
      </el-aside>

      <el-container>
        <el-header height="80px" class="border">
          <div class="header-content">
            <span class="title"><el-icon><Grid /></el-icon>博能仓库管理系统</span>
            <el-button type="warning" @click="handleLogout" class="logout-btn">退出登录</el-button>
          </div>
        </el-header>

        <el-main>
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">

              <router-link v-if="index ==0" >{{ breadcrumb.name }}</router-link>
              <router-link v-if="index!=0" :to="breadcrumb.url">{{ breadcrumb.name }}</router-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div style="height: 20px;"></div>

          <router-view></router-view>
        </el-main>

        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
  .border{
    border: 1px solid #ccc;
    border-style: none,none,solid,none;
  }
  .title{
    font-size: 30px;
    font-weight: bold;
    padding: 20px;
    Display: inline-block
  }
  a{
    text-decoration: none;
  }
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logout-btn {
    margin-right: 20px;
  }
</style>